<template>
  <div :class="'loading ' + (delaying ? ' delay' : '')" @mousewheel.prevent="" @touchmove.prevent="">
    <svg viewBox="25 25 50 50">
      <circle cx="50" cy="50" r="20" fill="none" class="rotate"></circle>
    </svg>
    <b v-if="title">{{ title }}</b>
  </div>
</template>

<script type="text/javascript">

export default {
  name: "loading",
  data() {
    return {
      delaying: false,
    }
  },
  props: {
    title: String,
    /** 延迟显示，单位毫秒，此值仅在mounted时生效一次
     * 例如点击一个按钮发送接口后需要显示loading，但是如果接口速度很快，就没必要显示loading了
     * 此时loading第一时间显示(看不见)以防止多次点击按钮发送接口
     * 但是延迟时间后接口任然未完成将真正显示loading样式
     */
    delay: Number,
  },
  mounted() {
    if (this.delay) {
      this.delaying = true;
      setTimeout(() => {
        this.delaying = false;
      }, this.delay)
    }
  }
}
</script>

<style lang="scss" scoped>
.delay {
  opacity: 0;
}

.loading {
  transition: all 0.3s;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgb(0 0 0 / 80%);
  color: #409eff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  stroke-width: .5em;
  stroke: #409eff;
  z-index: 6;

  &.full:not([full]) {
    position: fixed;
    right: 0;
    bottom: 0;
  }

  svg {
    width: 2em;
  }

  b {
    margin-top: .5em;
  }

  .rotate {
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }

  @keyframes loading-dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0
    }

    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -40px
    }

    to {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -120px
    }
  }
}
</style>